<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>开发</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>


    .header {
        width: 93%;
        height: 3rem;
        padding: 0.5rem 0.8rem;
        border-bottom: 1px solid rgb(242, 242, 242, 0.5);
        line-height: 3rem;
        position: fixed;
        top: 0rem;
        background-color: #fff;
    }

    .header ul {
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .header ul li {
        width: 30%;
        text-align: center;
        float: left;
    }

    .header ul li a {
        color: black;
        text-decoration: none;
        font-weight: bold;
    }

    #a {
        color: #40cccc;
    }
    .lines_s {
        position: absolute;
        top:3.7rem;
        left: 20%;
        border-bottom: 0.25rem solid #40cccc;
        width: 2rem;
    }
    .nav{
    width: 93%;
    height: auto;
    overflow: hidden;
    padding:0rem 0.8rem;
    padding-bottom: 1rem;
    background-color: rgb(242, 242, 242, 0.5);

    }
    .nav_one{
      width: 90%;
      height: 15rem;
      margin: 2rem auto;
    }
    .nav_one h3{
      width: 100%;
      height: 2rem;
      line-height: 2rem;
    }
    .nav_ni{
      width: 100%;
      height:13.5rem;
      background-color: #fff;
      margin-top: 0.5rem;
    }
    .fl{
      float: left;
    }
    .fr{
      float: right;
    }
    .ni_top{
      width: 93%;
      padding: 1rem 0.8rem;
      height:3rem;
      line-height: 3rem;
      border-bottom: 0.1rem solid rgb(242, 242, 242, 0.5);
    }
    p{
      font-size: 1.1rem;
    }

    .ni_bottom{
      width: 93%;
      padding: 1rem 0.8rem;
      height: 8rem;
      line-height: 3rem;
    }
    .ni_n{
      width:100%;
      height: 4.5rem;
      line-height: 2rem;
      display: flex;
      justify-content: space-between;

    }
    .ff{
      width: 30%;
      height: 4.5rem;
      text-align: center;
    }
    .nav_two{
      width: 90%;
      height: 80%;
      margin: 4rem auto 0rem;
      overflow: hidden;
    }
    .nav_two h3{
      width: 100%;
      height: 2rem;
      line-height: 2rem;
    }
    .nav_xue{
      width: 100%;
      height:10rem;
      margin-top: 0.8rem;
    }
    .xue_top{
      width: 100%;
      height: 2rem;
    }
    .xue_img{
        width: 3%;
        height:35%;
        margin-right: 0.8rem;
        margin-top: 0.1rem
    }
    .xue_img img{
      width: 100%;
      height: 100%;
    }
    .xue_bottom{
      width: 100%;
      height: 5rem;
      margin-top: 1rem;
      display: flex;
      justify-content: space-between;
    }
    .bo_img{
      width: 30%;
      height: 83%;
    }
    .bo_imgs{
      width: 45%;
      height: 90%;
    }
    .bo_imgs img{
      width: 100%;
      height: 100%;
    }
    .bo_img img{
      width: 100%;
      height: 100%;
    }
  .three_all{
    width: 90%;
    margin: 0.5rem auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .all_one{
    width: 40%;
    height: 10rem;
    background-color: #fff;
    padding: 0.8rem;
    margin-top: 1rem;
  }
  .all_p{
    width: 100%;
    text-align: center;
    height: 7.5rem;
    border-bottom: rgb(242, 242, 242, 0.5);
  }
  .all_jia{
    width: 100%;
    text-align: center;
    color: #ccc;
  }
  .no{
    width: 100%;
    /*height: rem;*/
  }
  .order{
    width:50%;
    margin: 0 auto;
    height: 2rem;
    line-height: 2rem;
    color:#FFF;
    background-color: #40CCCC;
    border-radius: 1rem;
  }
  .add{
    width: 100%;
    height: 0.5rem;
    position: relative;
    top: 1.2rem;
  }
    </style>
</head>
<body>

  <div class="nav">
    <div class="nav_one">
      <h3>我的成绩单</h3>
      <div class="nav_ni">
        <div class="ni_top">
          <p class="fl">今日学分</p>
          <!-- <div class="ni_img fr">
            <img src="../image/a26.png" alt="">
          </div> -->
          <p class="fr" style="color:#40cccc;font-size:1.3rem;font-weight:bold;margin-right:0.5rem;"><span id="day_cerdit">0</span><span style="font-size:0.9rem;">分</span></p>
        </div>
        <div class="ni_bottom">
          <p>总学分</p>
          <div class="ni_n">
            <div class="fl ff">
              <p>入学天数</p>
              <p style="color:#40cccc;font-size:1.3rem;font-weight:bold;"><span id="come_day">0</span><span style="font-size:0.9rem;">天</span></p>
            </div>
            <div class="fl ff">
              <p>总学分</p>
              <p style="color:#40cccc;font-size:1.3rem;font-weight:bold;"><span id="credit">0</span><span style="font-size:0.9rem;">分</span></p>
            </div>
            <div class="fl ff">
              <p>星级</p>
              <p style="color:#40cccc;font-size:1.3rem;font-weight:bold;" id="grade">实习</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav_two">

      <div class="no">
        <div class="xue_top">
          <div class="xue_img fl">
            <img src="../image/u25.png" alt="">
          </div>
          <p class="fl">学院学习</p>
        </div>
        <div class="three_all" id="group">
          <!-- <div class="all_one">
              <div class="all_p">
                <p style="font-size:1.2rem">很会爱学院</p>
                <p style="font-size:1rem;color:#ccc;">亲子关系的构建</p>
                <p style="font-size:0.9rem;color:#40cccc;margin-top:1rem;">2333331人已加入</p>
              </div>
              <div class="all_jia">
                <p>正在学习</p>
              </div>
          </div> -->

        </div>
      </div>
    </div>

  </div>
</body>



<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>

<script>
var userinfo = $api.getStorage('userinfo');
var pages = 1
var pagesize = 10
var ok = true
apiready = function(){

  if(!userinfo){
    api.openWin({
        name: 'user_login',
        url: './user_login.html',

    });
  }else{
    get_list()//获取群组列表
    get_user()
  }
  api.addEventListener({
      name:'user_login',
      extra:{
          threshold:0
      }
  }, function(ret, err){
          userinfo=$api.getStorage('userinfo');
          get_list()//获取群组列表
          get_user()
        //	get_user()//获取用户数据

  });

  api.addEventListener({
      name:'user_register',
      extra:{
          threshold:0
      }
  }, function(ret, err){
          userinfo=$api.getStorage('userinfo');
          get_list()//获取群组列表
          get_user()
          //get_user()//获取用户数据

  });

  api.addEventListener({
      name:'user_out',
      extra:{
          threshold:0
      }
  }, function(ret, err){
          userinfo=$api.getStorage('userinfo');
          get_list()//获取群组列表
          get_user()//
        //	get_user()//获取用户数据

  });


    api.addEventListener({
      name : 'scrolltobottom',
        extra : {
          threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
        }
      }, function(ret, err) {
        get_list()
        // add_load(0,0)
      });

      api.addEventListener({
        name : 'group_out',
          extra : {
            threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
          }
        }, function(ret, err) {
          var ids = ret.value.id

          $("#add"+ids).html('加入')
          $("#add"+ids).addClass('order')
          $('#w'+ids).removeAttr('onclick')
          $('#w'+ids).attr('onclick','add_group('+ids+')');

          // add_load(0,0)
        });
};

function get_user() {
  api.ajax({
      url: SITE_URL+'group_api/user/index',
      method: 'post',
      data: {
          values: {
              user_id: userinfo.id
          }
      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          $("#day_cerdit").html(ret.data.day_credit)
          $("#come_day").html(ret.data.come_day)
          $("#credit").html(ret.data.credit)
          $("#grade").html(ret.data.grade)
        }else{
          msgcode('拉取个人信息失败')
        }
//          alert( JSON.stringify( ret ) );
      } else {
        msgcode('请检查网络连接')
          //alert( JSON.stringify( err ) );
      }
  });

}

function group(id) {
  api.openWin({
      name: 'grouplist',
      url: './grouplist.html',
      pageParam: {
                  id: id
              }
  });
}

function add_group(id) {
  api.ajax({
      url: SITE_URL+'group_api/index/add_group',
      method: 'post',
      data: {
          values: {
              user_id: userinfo.id,
              pid:id
          }
      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          $("#add"+id).html('正在学习')
          $("#add"+id).removeClass('order')
          $('#w'+id).removeAttr('onclick')
          $('#w'+id).attr('onclick','group('+id+')');
          msgcode('加入成功')
          setTimeout(function () {
            api.openWin({
                name: 'grouplist',
                url: './grouplist.html',
                pageParam: {
                            id: id
                        }
            });
          },500)
        }else{
          msgcode('加入失败')
        }
        //  alert( JSON.stringify( ret ) );
      } else {
        //  alert( JSON.stringify( err ) );
      }
  });

}


function get_list() {
  if(ok==false){
    return false
  }

  var html =''
  var obj = $api.byId('group');

  api.ajax({
      url: SITE_URL+'group_api/index/index',
      method: 'post',
      data: {
        values:{
          page:pages,
          pagesize:pagesize,
          user_id:userinfo.id
        }

      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          for (var i = 0; i < ret.data.length; i++) {
            var dat = ret.data[i]
            var name = cutstr(dat.name,12)
            var title = cutstr(dat.title,16)
            if(dat.state==1){//已加入

              html +='<div class="all_one"  id="w'+dat.id+'" onclick="group('+dat.id+')">'
              html +='<div class="all_p">'
              html +='<p style="font-size:1.2rem">'+name+'</p>'
              html +='<p style="font-size:1rem;color:#ccc;height:2rem;margin-top:0.3rem;">'+title+'</p>'
              html +='<p style="font-size:0.9rem;color:#40cccc;margin-top:1rem;" class="add">'+dat.user_num+'人已加入</p>'
              html +='</div>'
              html +='<div class="all_jia">'
              html +='<p  id="add'+dat.id+'">正在学习</p>'
              html +='</div>'
              html +='</div>'
            }else{
              html +='<div class="all_one" id="w'+dat.id+'" onclick="add_group('+dat.id+')">'
              html +='<div class="all_p">'
              html +='<p style="font-size:1.2rem">'+name+'</p>'
              html +='<p style="font-size:1rem;color:#ccc;height:2rem;margin-top:0.3rem;" >'+title+'</p>'
              html +='<p style="font-size:0.9rem;color:#40cccc;margin-bottom:1rem;" class="add">'+dat.user_num+'人已加入</p>'
              html +='</div>'
              html +='<div class="all_jia">'
              html +='<p class="order" id="add'+dat.id+'">加入</p >'
              html +='</div>'
              html +='</div>'

            }

          }
          $api.append(obj, html);
          pages +=1

        }else{
          ok = false
          msgcode('暂无更多讨论群组')
        }
        //  alert( JSON.stringify( ret ) );
      } else {

          //alert( JSON.stringify( err ) );
      }
  });

}



</script>









</html>
